<template>
    <h1>APP 组件</h1>

    <ul>
        <li>{{ obj.id }}</li>
        <li>{{ obj.name }}</li>
    </ul>
    <button @click="changeName">修改用户名</button>
    <button @click="changeName2">修改用户名 (toRaw)</button>
</template>

<script setup>
import { reactive, toRaw, markRaw } from "vue";

// const info1 = {}
// const info2 = markRaw({})

const obj = reactive({
    id: "QF001",
    name: "张三",
});


function changeName () {
    obj.name = '李四'
}

function changeName2 () {
    const newObj = toRaw(obj)

    // console.log(obj)
    // console.log(newObj)

    newObj.name = '王五'

    console.log(newObj.name)
}
</script>
